FastClass - A Mentor Booking App
Azhar Sham
The product:
FastClass is a online mentor booking website for
professional to take mentorship from experts.
Project overview
Project duration:
October 2021 - November 2021
The problem:
Professionals who are switching jobs are
unable to find a proper mentor to guide them
and help them to refresh their skills.
Project overview
The goal:
FastClass lets professionals to find mentorship
from experts regarding skill update and
interview preparation
My role:
UX Designer for FastClass App
Project overview
Responsibilities:
Conducting interviews, paper and digital
wireframing, low and high-fidelity prototyping,
conducting usability studies, accounting for
accessibility, iterating on designs and
responsive design.
Understanding
the user
● User research
● Personas
● Problem statements
● User journey maps
User research: summary
I conducted user interviews, which I then turned into empathy maps to better understand the
target user and their needs. I Discovered that many professionals struggle to find right help quickly
while looking out for job switch. They require a mentor who can guide them to professionally fit to
new job requirements
User research: pain points
Navigation
Shopping website
designs are often busy,
which results in
confusing navigation
Interaction
Small buttons on
shopping websites make
item selection difficult,
which sometimes leads
users to make mistakes
1 2
Experience
Online shopping
websites don’t provide
an engaging browsing
experience
3
Persona: Maya Deepak
Problem statement:
Maya Deepak, a full time
software engineer is
looking out for mentos
who could help her to
upskill her skill sets to
market standards
User journey map
Image of user
journey map
created a user journey map
of Maya’s experience using
the site to help identify
possible pain points and
improvement
opportunities.
● Sitemap
● Paper wireframes
● Digital wireframes
● Low-fidelity prototype
● Usability studies
Starting
the design
Sitemap
Difficulty with website navigation was a
primary pain point for users, so I used
that knowledge to create a sitemap.
My goal here was to make strategic
information architecture decisions that
would improve overall website
navigation. The structure I chose was
designed to make things simple and
easy.
Image of
sitemap/IA
Paper wireframes
Next, I sketched out paper wireframes
for each screen in my app, keeping
the user pain points about navigation,
browsing, and checkout flow in mind.
The home screen paper wireframe
variations to the right focus on
optimizing the browsing experience
for users.
Image of paper
wireframes
Paper wireframe
screen size variation(s)
Next, I sketched out paper
wireframes for each screen in my
app, keeping the user pain points
about navigation, browsing, and
checkout flow in mind.
The home screen paper wireframe
variations to the right focus on
optimizing the browsing experience
for users.
Image of paper
wireframe
screen size
variation(s)
Digital wireframes
Moving from paper to digital
wireframes made it easy to
understand how the redesign
could help address user pain
points and improve the user
experience.
Prioritizing useful button
locations and visual element
placement on the home page
was a key part of my strategy.
Easy to
Schedule
Insert first wireframe
example that
demonstrates design
thinking aligned with
user research
Easy navigation
and search
Digital wireframe
screen size variation(s)
Low-fidelity prototype
To create a low-fidelity prototype, I
connected all of the screens involved in
the primary user flow of adding an item
to the cart and checking out.
At this point, I had received feedback on
my designs from members of my team
about things like placement of buttons
and page organization. I made sure to
listen to their feedback, and I
implemented several suggestions in
places that addressed user pain points.
Screenshot of
prototype with
connections or
prototype GIF
Usability study: parameters
Study type:
Unmoderated usability study
Location:
India, Remote
Participants:
5 participants
Length:
20-30 minutes
Usability study: findings
These were the main findings uncovered by the usability study:
Should be able to visit
homepage even without
login
Navigation Accessibility Control
Should be able to book
within homepage
Should be able to cancel
at any point in the flow
1
2
3
● Mockups
● High-fidelity prototype
● Accessibility
Refining
the design
Mockups
Based on the insights from the usability study, I made changes to the booking option, i removed
extra button for choose date and made the schedule option as a next step in the booking process
Mockup 2 before
Mockup 2 after
Before usability study
After usability study
Mockups
Based on the insights from the usability study, I made changes to the booking option, i removed
extra button for choose date and made the schedule option as a next step in the booking process
Mockup 2 before
Mockup 2 after
Before usability study
After usability study
Mockups: Original screen size
Main
mockup
screen for
display
Main
mockup
screen for
display
Main
mockup
screen for
display
Main
mockup
screen for
display
Mockups: Screen size variations
Main
mockup
screen for
different
screen size
variations
Main
mockup
screen for
different
screen size
variations
Main
mockup
screen for
different
screen size
variations
Main
mockup
screen for
different
screen size
variations
Accessibility considerations
I used headings with
different sized text for
clear visual hierarchy
I used landmarks to help
users navigate the site,
including users who rely
on assistive technologies
I designed the site with alt
text available on each
page for smooth screen
reader access
1 2 3
● Takeaways
● Next steps
Going forward
Takeaways
Impact:
Our target users shared that the design was
intuitive to navigate through, more engaging
with the images, and demonstrated a clear
visual hierarchy.
What I learned:
I learned that even a small design change can
have a huge impact on the user experience.
The most important takeaway for me is to
always focus on the real needs of the user
when coming up with design ideas and
solutions.
Next steps
Conduct follow-up
usability testing on the
new website
Identify any additional
areas of need and ideate
on new features
1 2
Let’s connect!
Insert a few sentences summarizing the next steps you would take with this
project and why. Feel free to organize next steps in a bullet point list.
Thank you for reviewing my work on the Tee’s Shirts app!
If you’d like to see more, or would like to get in touch, my contact information is provided below:
Email: azharshamn@gmail.com
Website: azharsham.in
